import React from 'react'
import {
  View,
  StyleSheet,
  Text, ScrollView, Image
} from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from '../../../components/button/CustomButton'
// import ScrollableTabView from 'react-native-scrollable-tab-view'

class TabView extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      tabPage: 0,
      header: {}
    }
  }

  childRender = () => {
    const { tabPage } = this.state
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 100 }}>
        </View>
        {/* <ScrollableTabView
          style={styles.scrollableTabView}
          page={tabPage}
          renderTabBar={this._renderTabBar}
        >
          <View tabLabel="兼职" style={[styles.tabItem, { backgroundColor: 'red' }]}>
            <Text>兼职</Text>
          </View>
          <View tabLabel="实习" style={[styles.tabItem, { backgroundColor: 'blue' }]}>
            <Text>实习</Text>
          </View>
          <View tabLabel="全职" style={[styles.tabItem, { backgroundColor: 'yellow' }]}
          >
            <Text>全职</Text>
          </View>
        </ScrollableTabView> */}
      </View>
    )
  }

  _renderTabBar = (props) => {
    const { tabs, activeTab, goToPage } = props
    console.info(props)
    return (
      <View style={{ flexDirection: 'row' }}>
        {
          tabs && tabs.map((item, index) => {
            return (
              <CustomButton key={index} params={{ index, goToPage }} onPress={this._setTabPage}>
                <Text>{item}</Text>
              </CustomButton>
            )
          })
        }
      </View>
    )
  }

  _setTabPage = ({ index, goToPage }) => {
    console.info('_setTabPage', index)
    goToPage(index)
    // this.setState({
    //   tabPage: index
    // })
  }
}

export default TabView

const styles = StyleSheet.create({
  jobNatureView: {
    width: ScaleS(363),
    paddingHorizontal: ScaleS(20),
    marginHorizontal: ScaleS(6),
    backgroundColor: 'white',
    borderRadius: ScaleS(12),
    marginTop: ScaleS(30)
  },
  jobNatureTitleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  jobNatureTitle: {
    color: '#444444',
    fontSize: ScaleT(27),
    fontWeight: '500',
    flex: 1
  },
  jobNatureIndexView: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  jobNatureIndex: {
    color: '#999999',
    fontSize: ScaleT(20),
    fontWeight: '500'
  },
  jobNatureTotal: {
    color: '#999999',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  jobNatureTitleStatement: {
    color: '#FFC200',
    fontSize: ScaleT(14),
    fontWeight: '400',
    marginTop: ScaleS(18)
  },
  jobAreaLocationView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(40)
  },
  locationLabelView: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    flex: 1
  },
  locationLabel: {
    color: '#000000',
    fontSize: ScaleT(32),
    fontWeight: '600'
  },
  locationLabelImg: {
    width: ScaleS(11),
    height: ScaleS(19),
    marginLeft: ScaleS(10),
    resizeMode: 'contain'
  },
  locationImg: {
    width: ScaleS(18),
    height: ScaleS(22),
    resizeMode: 'contain'
  },
  jobAreaAreaView: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: ScaleS(30)
  },
  areaItemView: {
    width: ScaleS(94),
    height: ScaleS(42),
    borderRadius: ScaleS(5),
    borderStyle: 'solid',
    borderWidth: ScaleS(1),
    justifyContent: 'center',
    alignItems: 'center'
  },
  areaItemText: {
    fontSize: ScaleT(14),
    fontWeight: '400'
  },
  jobNatureNextStepView: {
    width: ScaleS(297),
    height: ScaleS(50),
    backgroundColor: '#000000',
    borderRadius: ScaleS(5),
    marginTop: ScaleS(122),
    marginBottom: ScaleS(26),
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: ScaleS(13)
  },
  jobNatureNextStep: {
    color: '#ffffff',
    fontSize: ScaleT(15),
    fontWeight: '600'
  }
})
